<template>
    <div class="aoLayout">
        <tg-tags :tagArr="tagArr" @changeData="changeTags" :isHiddenBtn="true">
                <template #title>
                    <span>TA的音频</span>
                </template>
        </tg-tags>
        <div class="videoBox" v-loading="loading" element-loading-text="Loading..." element-loading-background="white">
            <p v-for="item in info?.data" :key="item.id">
                <audio-item
                    :id="item.id"
                    :title="item.title"
                    :ctime="item.ctime"
                    :duration="item.duration"
                    :play="item.statistic.play"
                    :cover="item.cover"
                >
                </audio-item>
            </p>
        </div>
        <div class="pagination">
            <el-config-provider :locale="zhCn">
                <el-pagination  background 
                                layout="prev, pager, next, jumper" 
                                :current-page="pageVal.size"
                                :total="pageVal.total" 
                                :default-page-size="30" 
                                prev-text="上一页"
                                next-text="下一页"
                                @current-change="changePage"/>
            </el-config-provider>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { tgTags, articlesItem, audioItem } from '@/pages/up/components'
import { get } from '@/http/axios'
import { onBeforeMount, reactive, ref, computed } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { changePagTotal, countTotal } from './index'
import { changeNowRoute, baseRouteGetStatus } from '@/router/changeUrl'
import { useRouter } from 'vue-router'

interface Props{
    mid:string
}
const props = defineProps<Props>()
let info = ref()
let loading = ref<boolean>(true)
const map = new Map()
const router = useRouter()
const pageVal = reactive({
    size:1,
    total:0,
})
let tagArr = reactive([
    { title:'最新发布',label:'1' },
    { title:'最多阅读',label:'2' },
    { title:'最多收藏',label:'3' }
])

onBeforeMount(() => {
    baseRouteGetStatus(router,map)
    if (map.has('pn')) pageVal.size = Number(map.get('pn'))
    initData()
})
function initData() {
    info.value = []
    loading.value = true
    const obj = changeNowRoute(router,map)
    const { pn = 1, mid = props.mid, order = 1 } = { ...obj }
    get('/audio/music-service/web/song/upper?uid=' + mid +'&pn='+ pn +'&ps=30&order=' + order)
    .then(res => {
        console.log('音频',res);
        info.value = res.data
        loading.value = false
        pageVal.total = res.data.totalSize
    }).catch(err => {
        alert('音频数据加载失败')
    })
}
function changeTags(order:string) {
    map.set('order', order)
    map.set('pn', 1)
    pageVal.size = 1
    initData()
}
function changePage(pn: number) {
    pageVal.size = pn
    map.set('pn', pn)
    initData()
}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/changePagintoin.scss);
p{
    padding: 0;
    margin: 0;
}
.aoLayout{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.videoBox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
    min-height: 240px;
    overflow: hidden;
    & p{
        width: calc(( 100% - 20px * 4 ) / 5);
        height: 240px;
    }
}
</style>